<template>
    <div>
        <img src="../assets/conference.png" alt="" class="meeting">
        <van-tabs v-model:active="active" style="height:40vh;">
            <van-tab name="a">
                <template #title> <van-icon name="user-circle-o" /> 普通登录 </template>
                <van-notice-bar left-icon="volume-o" text="未注册用户登录时将自动注册！" />
                <van-form>
                    <div class="login">

                        <van-cell-group inset>
                            <van-icon name="user" class="usericon" color="rgb(210, 210, 210)" />
                            <van-field v-model="phone" name="用户名" placeholder="手机号"
                                :rules="[{ required: true, message: '' }]" class="phone" />
                            <van-icon name="lock" class="lockicon" color="rgb(210, 210, 210)" />
                            <van-field v-model="common_pwd" name="密码" :type="checked ? 'text' : 'password'"
                                placeholder="登录密码" :rules="[{ required: true, message: '' }]" class="common_pwd">
                            </van-field>
                            <t-switch v-model="checked" :label="['开', '......']" class="change"
                                type="password"></t-switch>
                        </van-cell-group>
                    </div>
                    <div style="margin:20px;">
                        <van-button round block type="primary" native-type="submit" style="border-radius: 10px;"
                            @click="onNormal_Login">
                            登录
                        </van-button>
                    </div>
                    <p class="forgetpwd" @click="forgetPwd">忘记登录密码</p>
                </van-form>
            </van-tab>
            <van-tab name="b">
                <template #title> <van-icon name="https://s2.loli.net/2025/01/02/83zFDNGTdxeLBrp.png" /> 陪诊师登录
                </template>
                <van-notice-bar left-icon="volume-o" text="未注册用户登录时将自动注册！" />
                <van-form>
                    <div class="login">
                        <van-cell-group inset>
                            <van-icon name="user" class="usericon" color="rgb(210, 210, 210)" />
                            <van-field v-model="es_phones" name="用户名" placeholder="手机号"
                                :rules="[{ required: true, message: '' }]" class="phone" />
                            <van-icon name="lock" class="lockicon" color="rgb(210, 210, 210)" />
                            <van-field v-model="common_pwds" name="密码" :type="checked ? 'text' : 'password'"
                                placeholder="登录密码" :rules="[{ required: true, message: '' }]" class="common_pwd">
                            </van-field>
                            <t-switch v-model="checked" :label="['开', '......']" class="change"
                                type="password"></t-switch>
                        </van-cell-group>
                    </div>
                    <div style="margin:20px;">
                        <van-button round block type="primary" native-type="submit" style="border-radius: 10px;"
                            @click="onPatient_Login">
                            登录
                        </van-button>
                    </div>
                    <p class="forgetpwd" @click="forgetPwd">忘记登录密码</p>
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import http from '@/http';
import { useRouter } from 'vue-router';
import { useUserStore} from '../stores/store';

const active = ref('a');
const userStore = useUserStore();
const router = useRouter()

const checked = ref(false);

const phone = ref('')
const common_pwd = ref('')
function onNormal_Login() {
    const data = {
        phone: phone.value,
        common_pwd: common_pwd.value
    }
    http.post('patient/register_login/', data).then(res => {
        if (res.data.code == 200) {
            console.log("请求成功", res.data);
            // let account = { 'account': phone.value }
            userStore.setUserAccount(phone.value)
            console.log("用户名保存成功", userStore.userAccount);
            localStorage.setItem('normalname', phone.value);
            localStorage.setItem('token', res.data.token);
            router.push('/homepage')
        } else {
            alert(res.data.msg)
        }
    }).catch(err => {
        console.log("请求失败", err);

    })
}


const es_phones = ref('')
const common_pwds = ref('')
function onPatient_Login() {
    const data = {
        phone: es_phones.value,
        common_pwd: common_pwds.value
    }
    console.log(data)
    if (data.common_pwd == '') {
        console.log('不能为空')
        alert('不能为空')
    } else {
        http.post('patient/escort_reglogin/', data).then(res => {
            console.log(data)
            if (res.data.code == 200) {
                console.log("请求成功", res.data);
                let account = { 'account': phone.value }
                userStore.setEscortAccount(es_phones.value)
                console.log("用户名保存成功", userStore.escort_Account);
                localStorage.setItem('escortname', phone.value);
                console.log(">>>>>>>", res.data.token)
                localStorage.setItem('token', res.data.token);
                alert(res.data.msg)
                router.push('/homepage')
            } else {
                console.log("请求>>>>", res.data);
                alert(res.data.msg)
            }
        }).catch(err => {
            console.log("请求失败", err);

        })
    }

}

console.log(userStore.escort_Account)


function forgetPwd() {
    router.push('/resetpwd')
}

</script>
<style scoped>
.meeting {
    width: 80%;
    height: 40%;
    margin-top: 30px;
    margin-left: 10%;
}

.login {
    position: relative;
    border: 1px solid rgb(230, 230, 230);
    margin: 0 20px;
}

.usericon {
    position: absolute;
    top: 15px;
    left: 30px;
}

.lockicon {
    position: absolute;
    top: 60px;
    left: 30px;
}

.pwd {
    margin-left: 40px;
}

.change {
    position: absolute;
    top: 65%;
    right: 10%;
    width: 50px;
}

.forgetpwd {
    color: rgb(0, 119, 255);
    text-align: center;
}
</style>